<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <link href="css/normalize.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <style>
    html,body{
      height: 100%;
      background:white;
    }
    *{
      margin:0;
      padding:0;
    }
    .toolbar{
      z-index: 9;
      width:100%;
      box-sizing:border-box;
      position: fixed;
      top:0;
      display: flex;
      align-items: center;
      padding:3px 23px 5px 10px;
      background-color:#F1F1F1;
    }
    .toolbar2{
      z-index: 9;
      width:100%;
      box-sizing:border-box;
      position: fixed;
      top:0;
      display: flex;
      align-items: center;
      padding:3px 10px 12px 10px;
      background-color:#F1F1F1;
    }
    .search-inputwrap{
      flex:1;
      position: relative;
      display: inline-block;
      padding:0 10px 0 0;
    }
    .search-icon{
      width:14px;
      height:14px;
      position: absolute;
      top:5px;
      left:3px;
      background-image: url(./img/search.png);
      background-size: 14px 14px;
    }
    .search-input{
      width:100%;
      padding-left: 18px;
      outline:0;
      box-sizing:border-box;
    }
    .content-type{
      width:100px;
    }
    .listchoose-icon{
      display: block;
      margin:0 5px;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      align-items: center;
      -webkit-box-orient:vertical;
    }
    .gz-icon{
      background-image:url(./img/t1.png);
      width:12px;
      height:12px;
      background-size: 100% 100%;
    }
    .gz-icon_active{
      background-image:url(./img/t1-active.png);
      width:12px;
      background-size: 100% 100%;
      height:12px;
    }
    .list-icon{
      background-image:url(./img/t2.png);
      width:16px;
      background-size: 100% 100%;
      height:13px;
    }
    .list-icon_active{
      background-image:url(./img/t2-active.png);
      width:26px;
      background-size: 100% 100%;
      height:13px;
    }
    .messagebox,.messagebox2{
      z-index: 9;
      display: flex;
      bottom: 0;
      background-color: #F6F6F6;
      position: fixed;
      width:100%;
      box-sizing: border-box;
      padding:16px 11px;
      border-top:1px solid rgba(0,0,0,0.3);
    }

    .messagebox-content{
      flex: 1;
      overflow:hidden;
      text-overflow:ellipsis;
      display:flex;
      -webkit-line-clamp:1;
          align-items: center;
      -webkit-box-orient:vertical;
    }
    .export{
      padding:4px 9px;
      color:#FFFFFF;
      background: #1AAD19;
      border-radius: 5px;
      font-size: 13px;
      width:50px;
      cursor: pointer;
    }
    .messagebox-content1{
      font-size: 16px;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
    }
    .messagebox-content2{
      font-size: 12px;
      color:rgba(0,0,0,0.6);
      margin: 0 10px;
    }
    .messagebox-content3{
      padding-left:5px;
    }
    .content-list{
      padding:0 10px;
      margin-top:10px;
    }
    .content-title{
      font-size: 12px;
      padding:6px 0 6px 0;
      overflow: hidden;
      margin-top:5px;
      overflow: hidden;
      border-top:1px solid #D8D8D8;
    }
    .content-body{
      width:60px;
      height:60px;
      float: left;
      display:flex;
      justify-content:center;
      align-items: center;
      background-color:#bebebe;
      position: relative;
    }
    .content-body_active:before{
      content:" ";
      position: absolute;
      width:100%;
      height:100%;
      border:1px solid red;
    }
    .content-body>svg{
      max-width: 44px;
    }
    .content-body{
      cursor: pointer;
      margin:20px 20px 55px 20px;
      position: relative;
    }
    .content-view{
      display: flex;
      padding:0 0 3px 0;
    }
    .content{
      padding:43px 0 69px 0;
    }
    .content-wrap{
      padding:70px 20px 107px 20px;
      overflow: auto;
    }
    .btn-active{
      position: relative;
    }
    .btn-active:before{
      content: " ";
      position: absolute;
      top:0;
      left:0;
      border:3px solid #1AAD19;
      width:100%;
      height:100%;
      box-sizing:border-box;
    }
    .content-body:hover:before{
      content: "export";
      color:#1AAD19;
      text-align: center;
      font-size: 14px;
      line-height: 60px;
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,0.3);
      box-sizing:border-box;
    }
    .content-name{
      text-align: center;
      color:black;
      font-size: 12px;
      position: absolute;
      top:70px;
      left:0;
      word-break:break-all;
      width:62px;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow: hidden;
    }
    .tools-input{
      width:70px;
      outline: 0;
      color:#000;
      font-size: 12px;
    }
    .color-box{
      width:17px;
      height:17px;
      background-color:#000;
    }
    .login{
      cursor: pointer;
      flex:1;
      text-align: right;
      font-size: 15px;
    }
    .person{
      display: none;
      flex:1;
      font-size: 15px;
      text-align: right;
    }
    .login>div{
      display: inline-block;
      margin-left: 5px;
      background-image: url(./img/login.svg);
      width:20px;
      height:20px;
      background-size: 20px;
      cursor: pointer;
    }
    .person>div{
      display: inline-block;
      margin-left: 5px;
      background-image: url(./img/person.svg);
      width:20px;
      height:20px;
      cursor: pointer;
      background-size: 20px;
    }
    .login-mag{
      display: none;
    }
    .cell{
      align-items:center;
      position:relative;
      display:flex;
      padding:10px 30px;
      width:100%;
      box-sizing:border-box;
      font-size:17px;
      text-align:left;
      text-decoration:none;
      color:#555555;
      background-color:white;
      font-size: 17px;
      border:0;
    }
    .cell + .cell:before{
      position:absolute;
      content:'';
      left:15px;
      top:0;
      right:0;
      border-top:1px solid #EEEEEE;
    }
    .cell-title{
      width:50px;
      margin-left:10px;
      color:#555555;
    }
    .cell-input{
      flex:1;
    }
    .cell-input input{
      color:#555555;
      border:0;
      width:100%;
    }
    .login-mag{
      height:100%;
      box-sizing:border-box;
      background-color: #ececec;
      padding-top:50px;
    }
    .loginbtnwrap{
      padding:40px 30px 0 30px;

    }
    .loginbutton{
      border-radius:100px;
      line-height:48px;
      font-size:17px;
      color:#ffffff;
      background:#1A8CC2;
      text-align:center;
      cursor: pointer;
    }
    .register{
      display: block;
      margin:10px;
      float:right;
      color:#1A8CC2;
      font-size: 12px;
      cursor: pointer;
    }
    .author{
      flex:1;
      text-align: right;
      font-size: 13px;
      color:#555555;
    }
    #exit{
      cursor: pointer;
    }
    .bqts{
      margin-left: 15px;
      font-size: 12px;
    }
    </style>
  </head>
  <body>

  </body>
  <script type="text/javascript">
  var savedata;
  var choicedata;
  var searchData;
  var first = [];
  var project = [];
  var projectID = '';
  var typeID = '';
  var baseData;
  var getData;
  var i18;
  var isLogin = false;

  function appendDom(data){
    $('.bqts').remove();
    $('.content-wrap').empty();
    var dom = [];
    dom.push('<div class="bqts">'+i18.m3+'</div>');
    for(var i = 0;i < data.length;i++){
      dom.push('<div data-i="'+(data[i].index||i)+'" class="content-body">'+(data[i].content)+'<div class="content-name">'+data[i].name.replace('.svg','')+'</div>'+'</div>');
    }
    $('.content-wrap').append(dom.join(''));
  }
  function appendDom2(data){
    $('.bqts').remove();
    var typecount = -1;
    var dom = [];
    var typeobj = {};
    var leavedom = [];
    leavedom.push('<div class="content-title">未分类</div><div style="overflow:hidden">');
    for(var i = 0;i < data.length;i++){
      var firstname = data[i].name.split('_');
      if(firstname.length>1){
        firstname = firstname[0];
        if(typeobj[firstname] != undefined){
          dom[typeobj[firstname]].push('<div data-i="'+(data[i].index||i)+'" class="content-body">'+(data[i].content)+'<div class="content-name">'+data[i].name.replace('.svg','')+'</div>'+'</div>');
        }else{
          typecount++;
          typeobj[firstname] = typecount;
          dom[typecount] = [];
          dom[typecount].push('<div class="content-title">'+firstname+'</div><div style="overflow:hidden">');
          dom[typecount].push('<div data-i="'+(data[i].index||i)+'" class="content-body">'+(data[i].content)+'<div class="content-name">'+data[i].name.replace('.svg','')+'</div>'+'</div>');
        }
      }else{
        leavedom.push('<div data-i="'+(data[i].index||i)+'" class="content-body">'+(data[i].content)+'<div class="content-name">'+data[i].name.replace('.svg','')+'</div>'+'</div>');
      }
    }
    $('.content-wrap').empty();
    for(var i = 0;i<dom.length;i++){
      dom[i] = dom[i].join('') + '</div>';
    }
    $('.content-wrap').append(dom.join('') + leavedom.join('')+'</div>');
  }

  function domEvent(){
    $('.content-wrap').on('click','.content-body',function(){
      $('.content-body').removeClass('btn-active');
      $(this).addClass('btn-active');
      var i = parseInt($(this).attr('data-i'));
      choicedata = savedata[i];
      var twh = decodeURIComponent(choicedata.content).match(/viewBox=\".*?\"/ig)[0].replace('viewBox="0 0 ','').replace('"','').split(' ');

      if(projectID == ''){
        var width = $('#size').val();
        choicedata.width = parseInt(width);
        choicedata.height = parseInt(width * twh[1] / twh[0]);
        choicedata.color = $('#color').val();
        choicedata.type = 'public';
        SMAction('submit',choicedata);
      }else{
        $('.messagebox2').show();
        choicedata.type = 'private';
        choicedata.height = parseInt(twh[1]);
        choicedata.width = parseInt(twh[0]);
        SMAction('submit',choicedata);
      }
    }).on('mouseenter mouseout','.content-body',function(){
      var i = parseInt($(this).attr('data-i'));
      $('#author').text(i18.m16+'：'+savedata[i].author);
    })

    $('.login').click(function(){
      $('.icon-mag').hide();
      $('.login-mag').show();
    })

    $('.register').click(function(){
      SMAction('submit',{type:'link',link:'http://www.baidu.com'});
      return;
    })

    $('.search-input').on('input',function(e){
      var inputKey = $(this).val();
      searchK(inputKey);
    })
    $('#color').on('input',function(){
      var val = $(this).val();
      if(val.length == 6 || val.length == 3){
        $('.color-box').css('background','#'+val);
        $('path').attr('fill','#' + val);
        $('svg').css('color','#' + val);
      }
    }).on('blur',function(){
      var val = $(this).val();
      if(val.length == 3){
        $('#color').val(val[0]+val[0]+val[1]+val[1]+val[2]+val[2]);
      }else if(val.length == 6){
        
      }else{
        $('#color').val('000000');
      }
    })
    $('#size').on('input',function(){
      var val = $(this).val();
      $('svg').width(val);
    })
    $('.loginbutton').on('click',function(){
      var username = $('#username').val();
      var password = $('#password').val();
      SMAction('login',{
        username:username,
        password:password
      });
    })

    $('body').on('change','#selectproject',function(){
      projectID = $('#selectproject').val();
      var typeDom = [];
      typeDom.push('<option value="">'+i18.m14+'</option>')
      if(projectID != ''){
        for(var i = 0 ;i<project.length;i++){
          if(project[i].projectId == projectID){
            for(var k = 0;k<project[i].categoryList.length;k++){
              typeDom.push('<option value="'+project[i].categoryList[k].categoryId+'">'+project[i].categoryList[k].categoryName+'</option>')
            }
          }
        }
      }
      $('#selecttype2').empty().append(typeDom);
      if(projectID != ''){
        $('.messagebox').hide();
        SMAction('pushdata',{
          type:'project',
          id:projectID
        })
      }else{
        $('.messagebox2').hide();
        $('.messagebox').show();
        savedata = baseData;
        appendDom(savedata);
      }
    })
    $('body').on('change','#selecttype2',function(){
      typeID = $('#selecttype2').val();
      if(typeID != ''){
        SMAction('pushdata',{
          type:'type',
          id:typeID
        })
      }else{
        SMAction('pushdata',{
          type:'project',
          id:projectID
        })
      }
    })

    $('#exit').on('click',function(){
      $('.login').show();
      $('.person').hide();
      SMAction('submit',{
        type:'loginout'
      })
    })
  }
  
  

  function searchK(inputKey){
    searchData = [];
    if(inputKey != ''){
      for(var i = 0;i < savedata.length;i++){
        if(savedata[i].name.replace('.svg','').indexOf(inputKey) > -1){
          searchData.push({name:savedata[i].name,content:savedata[i].content,index:i});
        }
      }
      appendDom(searchData);

    }else{
      if(projectID!=''){
        appendDom2(savedata);
      }else{
        appendDom(savedata);
      }
    }
  }

  
  function appendType(){
    var projectDom = [];
    projectDom.push('<option value="">'+i18.m15+'</option>')
    for(var i = 0 ;i<project.length;i++){
      projectDom.push('<option value="'+project[i].projectId+'">'+project[i].projectName+'</option>')
    }
    $('#selectproject').empty().append(projectDom.join(''));
    var typeDom = [];
    projectID = $('#selectproject').val();
    typeDom.push('<option value="">'+i18.m14+'</option>');
    $('#selecttype2').empty().append(typeDom);
    typeID = $('#selecttype2').val();
  }
  

  function sLogin(data){
    $('.login-mag').hide();
    $('.icon-mag').show();
    if(data.status == 200){
      $('.login').hide();
      $('.person').show();
      $('.person #username-show').text('（'+data.nametest + '）');
      project = data.project;
      appendType();
    }else{
      $('#password').val('');
    }
  }
  function pushdata(data){
    getData = data.list;
    savedata = data.list;
    appendDom2(savedata);
  }
  $('body').on('click',function(){
    return false;
  })

  function initDomTree(){
    var dom = ['<div class="icon-mag">',
      '<div class="toolbar" style="display:none">',
        '<div class="login">',
          '<span>'+i18.m4+'</span>',
        '</div>',
        '<div class="person">',
          '<span id="username-show"></span>',
          '<span id="exit">'+i18.m5+'</span>',
        '</div>',
      '</div>',
      '<div class="toolbar2">',
        '<select class="content-type" name="" id="selectproject">',
          '<option value="">'+i18.m6+'</option>',
        '</select>',
        '<select style="margin:0 4px;" class="content-type" name="" id="selecttype2">',
          '<option value="">'+i18.m7+'</option>',
        '</select>',
        '<div class="search-inputwrap">',
          '<div class="search-icon"></div>',
          '<input class="search-input" type="text">',
        '</div>',
      '</div>',
      '<div class="content-wrap">',
      '</div>',
      '<div class="messagebox">',
        '<div class="messagebox-content">',
          '<div class="messagebox-content2">'+i18.m8+' #</div>',
          '<div class="">',
            '<input id="color" class="tools-input" type="text" value="000000" />',
          '</div> ',
          '<div class="color-box"></div>',
          '<div class="messagebox-content2">'+i18.m9+'</div>',
          '<div class="">',
            '<input id="size" class="tools-input" type="text" value="64" />',
          '</div>',
          '<div class="author" >',
            '<span id="author"></span>',
          '</div>',
        '</div>',
      '</div>',
      '<div class="messagebox2" style="display:none">',
        '<div class="messagebox-content">',
          '<div class="messagebox-content1">',
          '</div>',
          '<div class="messagebox-content2">',
          '</div>',
        '</div>',
        '<div class="messagebox-content3">',
          i18.m10,
        '</div>',
      '</div>',
    '</div>',
    '<div class="login-mag">',
      '<div class="cell">',
        '<div class="cell-title">',
          i18.m11,
        '</div>',
        '<div class="cell-input">',
          '<input id="username" type="text" />',
        '</div>',
      '</div>',
      '<div class="cell">',
        '<div class="cell-title">',
          i18.m12,
        '</div>',
        '<div class="cell-input">',
          '<input id="password" type="password" />',
        '</div>',
      '</div>',
      '<span class="register">'+i18.m13+'</span>',
      '<div class="loginbtnwrap">',
        '<div class="loginbutton">'+i18.m4+'</div>',
      '</div>',
    '</div>'];
    $('body').append(dom.join(''));
  }

  window.addEventListener('hashchange', function(e) {
    return false;
  }, false);
  init = function(data){
    i18 = data.i18;
    initDomTree();
    baseData = data.data;
    savedata = data.data;
    isLogin = data.isLogin;
    if(isLogin){
      $('.login').hide();
      $('.person').show();
      $('.person #username-show').text('（'+data.nametest+'）');
      project = data.project;
      appendType();
    }
    appendDom(baseData);
    domEvent();
  }
  </script>
</html>
